import React, { Component } from 'react'
import "./Article.scss"
import axios from "axios"

class Article extends Component {
    state = {
        //推荐 recommended  健康 health   保险 insurance
        activeTab: "recommended",
        goods: []
    }
    handleTabClick = (params) => {
        this.setState({
            activeTab: params.one
        })
        axios.get("https://www.linweiqin.cn/api/public/v1/goods/search", {
            params: {
                query: params.two
            }
        }).then(res => {
            // console.log(res)
            this.setState({
                goods: res.data.message.goods
            })
        })
    }
    componentDidMount() {
        axios.get("https://www.linweiqin.cn/api/public/v1/goods/search", {
            params: {
                query: "袜子"
            }
        }).then(res => {
            console.log(res)
            this.setState({
                goods: res.data.message.goods
            })
        })

    }
    // 点击列表的跳转到商品详情的逻辑
    handleListClick = (goods_id) => {
        this.props.history.push("gooddetails")
    }
    render() {
        return (
            <div className="headlines">
                <div className="headerTop">
                    众安头条
                </div>
                <div className="articleTab">
                    <div className={this.state.activeTab === "recommended" ? "tabItem active" : "tabItem"} onClick={this.handleTabClick.bind(this, { one: "recommended", two: "袜子" })}>推荐</div>
                    <div className={this.state.activeTab === "health" ? "tabItem active" : "tabItem"} onClick={this.handleTabClick.bind(this, { one: "health", two: "身体" })}>健康</div>
                    <div className={this.state.activeTab === "insurance" ? "tabItem active" : "tabItem"} onClick={this.handleTabClick.bind(this, { one: "insurance", two: "奶粉" })}>头条</div>
                </div>
                <div className="tabItemContent">
                    <div className={this.state.activeTab === "recommended" ? "" : "hidden"}>
                        {this.state.goods.map((v) => {
                            return (
                                <div className="goodsListItem" key={v.goods_id} onClick={this.handleListClick.bind(this, v.goods_id)}>
                                    <div className="listItemLeft">
                                        <img src={v.goods_small_logo} alt="" />
                                    </div>
                                    <div className="listItemRight">
                                        <div className="itemRightTop">{v.goods_name}</div>
                                        <div className="itemRightBottom">￥{v.goods_price}</div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                    <div className={this.state.activeTab === "health" ? "" : "hidden"}>
                        {this.state.goods.map((v) => {
                            return (
                                <div className="goodsListItem" key={v.goods_id} onClick={this.handleListClick.bind(this, v.goods_id)}>
                                    <div className="listItemLeft">
                                        <img src={v.goods_small_logo} alt="" />
                                    </div>
                                    <div className="listItemRight">
                                        <div className="itemRightTop">{v.goods_name}</div>
                                        <div className="itemRightBottom">￥{v.goods_price}</div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                    <div className={this.state.activeTab === "insurance" ? "" : "hidden"}>
                        {this.state.goods.map((v) => {
                            return (
                                <div className="goodsListItem" key={v.goods_id} onClick={this.handleListClick.bind(this, v.goods_id)}>
                                    <div className="listItemLeft">
                                        <img src={v.goods_small_logo} alt="" />
                                    </div>
                                    <div className="listItemRight">
                                        <div className="itemRightTop">{v.goods_name}</div>
                                        <div className="itemRightBottom">￥{v.goods_price}</div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        )
    }
}
export default Article
